<template>
	<view>
		<view class="container">
			<view class="ques-box mb20 mlr30">
				<view class="flex flex-align-start">
					<image class="icon mr10 mt5" src="/static/icon/icon_wen.png" mode="aspectFit" lazy-load="true">
					</image>
					<view class="flex-grow-1">
						<view class="fs32 col10 fwb">{{ info.question }}</view>
						<view class="label1 mtb10" v-for="(item, index) in info.q_and_a_tags_ids_text_arr">
							{{item}}
						</view>
						<!-- <view v-if="{{info.images}}" class="youzhi">有图</view> -->
						<view class="flex-box">
							<view class="fs24 col3 mr10">{{info.user.nickname}}</view>
							<!-- <view class="fs24 col89 mr10">400万预算 刚需</view> -->
							<!-- <view class="fs22 col89  flex-grow-1">关注闵行、宝山</view> -->
							<view class="fs22 col89">{{info.createtime_text}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="dati-box mb20 mlr30 flex flex-align-start" v-if="info.state == 2">
				<view class="head-box mr10">
					<image :lazy-load="true" :src="info.broker.avatar" mode="aspectFill"></image>
				</view>
				<view class="flex-grow-1">
					<view class="flex-box mb20">
						<view class="flex-grow-1">
							<view class="flex-box mb10">
								<view class="mr20 fs28 col3">{{  info.broker.nickname }}</view>
								<view class="fs24 col89">毕业于{{ info.profile.college }}</view>
							</view>
							<view class="flex-box fs22 col89">
								<view class="mr30">
									咨询人数
									<text class="red">{{ info.profile.service_num }}人</text>
								</view>
								<view>
									考察过楼盘
									<text class="red">{{ info.profile.take_look_num }}次</text>
								</view>
							</view>
						</view>
						<navigator class="btn-1" v-if="house_id == 0" :url="'/pages/article/want_ask/want_ask?broker_user_id=' + info.broker_user_id">向TA提问
						</navigator>
						<navigator v-else :url="'/pages/article/want_ask1/want_ask1?broker_user_id=' + info.broker_user_id + '&house_id=' + house_id + '&house_name=' + house_name" class="btn-1">向TA提问</navigator>
					</view>
					<view class="mb20 fs28 col3">
						<view>{{ info.answer }}</view>
						<!-- <view class="prebox" v-for="(item, index) in info.images_arr">
							<image :lazy-load="true" @tap="previewImg" :data-url="item" :src="item" mode="widthFix">
							</image>
						</view> -->
					</view>
					<view class="flex flex-align-start flex-wrap" v-for="(item, index) in info.images_arr">
						<image class="img1" src="" mode="widthFix" :lazy-load="true" @tap="previewImg" :data-url="item" :src="item"></image>
					</view>
					<view class="flex-box flex-between fs24 col89">
						<view class="flex-grow-1">{{ info.answertime_text }}</view>
						<view class="flex-box" @tap="likeAnswer" :data-index="index">
							<image class="icon-zan mr15"
								:src="'/static/icon/icon_zan' + (info.is_like ? '-on' : '') + '.png'" mode="aspectFit">
							</image>
							<view :class="'fs24 col89 ' + (info.is_like ? 'coloractive' : '')">有用({{ info.like_num }})
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>未解决</view>
			<view class="p40 mb40 bg-white" v-if="house_data.length > 0">
				<view class="fs34 col10 mb30">此问答相关楼盘</view>
				<view class="houselist">
					<navigator class="houseitem flex" :url="'/pages/house/building_detail/building_detail?id=' + item.id"
						v-for="(item, index) in house_data">
						<view class="houseimg">

							<image :lazy-load="true" :src="item.image_text" mode="aspectFill"></image>

						</view>
						<view class="flex-grow-1">
							<view class="flex-box flex-between pb10">
								<view class="housename m-ellipsis flex-grow-1">{{ item.name }}</view>
								<view class="sale_type1">{{ item.sale_state_text }}</view>
							</view>
							<view class="area-size flex-box flex-between">
								<text>{{item.city}} | {{item.alias_name}}</text>
								<text>{{ item.min_space }}㎡-{{ item.max_space }}㎡</text>
							</view>
							<view class="targetbox flex flex-wrap">
								<view class="targetitem" v-for='targets in item.targets'>
									{{targets}}
								</view>
							</view>
							<view class="housecost fwb">¥<text>{{item.price}}</text>/㎡</view>
						
						</view>
					</navigator>
				</view>
			</view>
			<template v-if="orther_data.length > 0">
				<view class="flex-box flex-between mb30 mlr40">
					<view class="fs34 col10 flex-grow-1">你可能还想了解</view>
					<view v-if="house_id == 0" @tap="jumpPages" data-url="/pages/home/information/information"
						data-type="1" class="fs24 col89">更多+</view>
					<view v-else @tap="jumpPages" :data-url="'/pages/article/asklist/asklist?house_id=' + house_id"
						data-type="3" class="fs24 col89">更多+</view>
				</view>
				<view class="ques-box mb20 mlr30" v-for="(item, index) in orther_data">
					<navigator class="flex flex-align-start"
						:url="'/pages/article/ask_detail/ask_detail?id=' + item.id">
						<image class="icon mr10 mt5" src="/static/icon/icon_wen.png" mode="aspectFit" lazy-load="true">
						</image>
						<view class="flex-grow-1">
							<view class="fs32 col10 fwb">{{ item.question }}</view>
						</view>
					</navigator>
				</view>
			</template>

			<view class="mt40 fs24 col89 mb30 tc">你的个性化买房问题当然得一对一解答才安心</view>
			<navigator class="footbtn" v-if="house_id == 0" url="/pages/article/want_ask/want_ask">我要问问</navigator>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				id: 0,
				house_id: 0,
				house_name: '',

				info: {
					question: '',
					images: '',
					q_and_a_tags_ids_text_arr: [],

					user: {
						nickname: ''
					},

					createtime_text: '',
					state: 0,

					broker: {
						avatar: '',
						nickname: '',
						college: '',
						service_num: '',
						take_look_num: ''
					},

					broker_user_id: '',
					answer: '',
					images_arr: [],
					answertime_text: '',
					is_like: false,
					like_num: ''
				},

				house_data: [],
				orther_data: [],
				targets: []
			};
		},
		methods: {
			initData: function() {
				var that = this; // 获取---搜索数据

				functions.getAjaxData(
					'/api/xiluhouse/Question/question_detail', {
						id: that.id
					},
					function(res) {
						that.info = res.data.info,
							that.house_data = res.data.house_data,
							that.orther_data = res.data.orther_data

					}
				);
			},
			likeAnswer(e) {

				var now_info = this.info;

				if (now_info.is_like) {
					return false;
				}

				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/question/like_answer', {
								id: now_info.id
							},
							function(res) {
								now_info.is_like = true;
								now_info.like_num = 1 + Number(now_info.like_num);
								that.info = now_info

							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			// 跳转页面 type=1(跳转有tabBar底部的页面)，type=2(正常跳转)
			jumpPages(event) {
				var type = Number(event.currentTarget.dataset.type);
				var url = event.currentTarget.dataset.url;

				if (type == 1) {
					functions.jumpPages(url);
				} else if (type == 3) {
					uni.navigateBack();
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},

			// 图片预览
			previewImg(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					// 当前显示图片的http链接
					urls: this.info.images_arr // 需要预览的图片http链接列表
				});
			},


		},
		onLoad: function(options) {
			var that = this
			that.house_name = options.house_name || '',
				that.house_id = options.house_id || 0,
				that.id = options.id || 0
			that.initData();
		},
	};
</script>

<style lang="less" scoped>
	.container {
		padding: 30rpx 0;
		background: #f6f7fa;
	}
	.ques-box {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 10rpx;
		.icon {
			display: block;
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
		}
		.label1 {
			display: inline-block;
			padding: 0 12rpx;
			height: 35rpx;
			border-radius: 2rpx;
			border: 1rpx solid #0091ff;
			font-size: 20rpx;
			color: #00a1ff;
			line-height: 35rpx;
		}
	}
	
	.dati-box {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 10rpx;
		.head-box {
			padding: 3rpx 0 0;
			width: 40rpx;
			height: 40rpx;
			background: linear-gradient(270deg, #ffb45c 0%, #ff6635 100%);
			border-radius: 10rpx;
			image {
				margin: 0 auto;
				display: block;
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
			}
		}
	
		.btn-1 {
			width: 130rpx;
			height: 50rpx;
			background: #0091ff;
			box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
			border-radius: 5rpx;
			font-size: 22rpx;
			color: #ffffff;
			line-height: 50rpx;
			text-align: center;
		}
	
		.icon-zan {
			display: block;
			width: 30rpx;
			height: 30rpx;
		}
		
		.img1{
			margin: 0 15rpx 15rpx 0;
			display: block;
			width: 200rpx;
			height: 200rpx;
		}
	}
	
	.houselist{padding: 30rpx 40rpx 0;}
	.houselist .houseitem{padding-bottom: 30rpx;}
	.houselist .houseitem .houseimg{width: 240rpx;height: 190rpx;  border-radius: 10rpx;margin-right: 20rpx;position: relative;overflow:hidden;}
	.houselist .houseitem .houseimg image{width: 240rpx;height: 190rpx;position: relative;z-index: 1;}
	.houselist .houseitem .houseimg .top{ width: 70rpx;height: 35rpx;background: linear-gradient(180deg, #F0DEC0, #DCBA8C);position: absolute;top: 0;left: 0;color: #fff;font-size: 20rpx;z-index: 2;text-align: center;line-height: 35rpx;}
	.houselist .houseitem .houseimg .top.grey{background: linear-gradient(180deg, #D3D4DD 0%, #999EAD 100%);}
	.houselist .housename{font-size: 30rpx;}
	.houselist .area-size{font-size: 24rpx;color: #898989;}
	.houselist .targetbox{padding: 14rpx 0 0;width: 100%;overflow-x: scroll;}
	.houselist .targetitem{padding: 2rpx 4rpx;background: #cce9ff;font-size: 18rpx;color: #0091ff;border-radius: 2rpx;margin-right: 10rpx;margin-bottom: 12rpx;}
	.houselist .housecost{color: #f8532f;font-size: 24rpx;}
	.houselist .housecost text{font-size: 34rpx;}
	.footbtn {
		margin: 0 auto;
		width: 250rpx;
		height: 80rpx;
		background: #0091ff;
		box-shadow: 0 4rpx 40rpx 0 rgba(3, 103, 179, 0.3);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
	}
</style>
